import React, { useContext } from 'react';

import { UploadContext } from '../useUploadModal';

import { CheckCircleFilled } from '@ant-design/icons';

import cls from 'classnames';
import '../index.less';
interface IpropsType {
  prefix: string;
}

export const ThirdStep: React.FC<IpropsType> = ({ prefix }) => {
  const contentPrefix = prefix + '-content';

  const { total, current } = useContext(UploadContext);

  return (
    <div
      className={cls(contentPrefix + '-body')}
      style={{ display: current === 2 ? 'block' : 'none' }}
    >
      <div className={cls(prefix + '-sucess')}>
        <div className={cls(prefix + '-sucess-wraper')}>
          <div className={cls(prefix + '-sucess-icon')}>
            <CheckCircleFilled />
          </div>
          <div className={cls(prefix + '-sucess-title')}>批量导入完成</div>
          <div className={cls(prefix + '-sucess-info')}>
            您已成功导入
            <span style={{ color: '#52c41a', fontWeight: 'bold' }}>
              {total}
            </span>
            条数据
          </div>
        </div>
      </div>
    </div>
  );
};
